<template>
  <div>
    <div :class='$style.header_fix'>
      <v-header
        :class="$style.header"
        :settings = "settings"
        @leftMenu = 'popupVisible = true'
        @rightMenu = 'showSearch'
      >
        <div class="flex-5 text-center b_FS-32 c_white" slot="content">{{ taskType }} list </div>
      </v-header>
      <v-search-bar @resultSelect = 'resultSelect' :taskType= 'taskType' :class="$style.searchBar" :backgroundColor="$style.transparent" :isShow.sync="isShowSearchBar"></v-search-bar>
      <div :class="$style.coverImg_container">
        <img :src="photo" alt="">
        <div :class="$style.textContent">
          <p class="b_FS-36 c_white text-right">{{ userName }}</p>
          <h4 class="b_FS-20 c_white text-right">{{ nowDate }}</h4>
        </div>
        <v-plus-btn @click='$_skipToAdd' :class="$style.plusBtn" ></v-plus-btn>
        <div :class="$style.whiteMask"></div>
      </div>
    </div>
    <mt-popup
      v-model="popupVisible"
      position="left"
    >
      <slide-bar @handleItemClick = '$_slide_handleItemClick' :items="menus" ref='sliderBar' />
    </mt-popup>
    <div :class="$style.progress_container" >
      <v-progress-bar v-if='progressData.length' @contentClick="$skipToDetail" :progressData = 'progressData'></v-progress-bar>
      <v-no-data style='padding-top: 100px' v-else :type='0' />
    </div>
    <div v-if="hasMore" class="text-center c_placeholder c_white-bg ptb20" >
      加载中...
    </div>
    <div v-else class="text-center c_placeholder c_white-bg ptb20" >
      主人，这已经是我的底线了
    </div>
  </div>
</template>

<script type="text/babel">
    import SlideBar from '@/components/slideBar/SlideBar.vue'
    import { dateFormat12rule, dateFormat12ruleLong, dateFormat2Str } from '@/util/transform'
    import { Toast } from 'mint-ui'
    export default {
        name: "taskCategory",
        components: { SlideBar },
        data() {
          return {
            userName : '' ,
            photo : '' ,
            popupVisible: false ,
            settings:{
              leftIcon : 'menu2 c_white',
              rightIcon : 'search c_white',
              leftSize: 30 ,
              rightSize : 45
            },
            isShowSearchBar : false ,
            menus : [
              {
                leftIcon : 'zidingyicaidan' ,
                leftSize : '36' ,
                content : 'All Task' ,
                type : 'all',
                link: '/task/category?type=all'
              },
              {
                leftIcon : 'shizhong' ,
                leftSize : '40' ,
                content : 'Nearest Task' ,
                type : 'nearest',
                link: '/task/category?type=nearest'
              },
              {
                leftIcon : 'right' ,
                leftSize : '32' ,
                content : 'Complete Task' ,
                type : 'complete',
                link: '/task/category?type=complete'
              },
              {
                leftIcon : 'jinri' ,
                leftSize : '40' ,
                content : 'Today Task' ,
                type : 'today',
                link: '/task/category?type=today'
              },
              {
                leftIcon : 'shezhi1' ,
                leftSize : '40' ,
                content : 'System Settings' ,
                type : 'setting',
                link: '/task/settings'
              },
              {
                leftIcon : 'custom-help' ,
                leftSize : '40' ,
                content : 'Help Center' ,
                type : 'help',
                link : '/task/help'
              },
            ],
            progressData : [],
            taskType : 'all' ,
            page:{
              pageSize: 10,
              pageNum : 1,
              lastValue : 0
            },
            hasMore :true ,
            nowDate : ''
          }
        },
        created() {
        },
        async mounted() {
          console.log(dateFormat2Str(new Date()))
          this.nowDate = dateFormat2Str(new Date())
          const type = this.$route.query.taskType
          //this.$_getTaskList(type? type :'all')
          this.$refs.sliderBar.$handleItemClick(type? type :'all')
          document.addEventListener('scroll',this.$isToBottom)
          let res = await this.$get('/api/user/info', {})
          if(res){
            this.photo = res.data.headImgUrl || 'http://ccnf-im-1255573444.cos.ap-guangzhou.myqcloud.com/1530668309751.jpg'
            this.userName = res.data.name
          }
        },
        beforeDestroy() {
          // 去除滚动加载监控
          document.removeEventListener('scroll', this.$isToBottom)
        },
        computed: {},
        methods: {
          // 滚动加载
          $isToBottom(e){
            const BodyEl = document.documentElement
            const Body = document.body
            let outH = Body.scrollHeight,
              currentH = BodyEl.offsetHeight,
              offH = Body.scrollTop > BodyEl.scrollTop ? Body.scrollTop : BodyEl.scrollTop
            if(currentH + offH == outH && this.hasMore ){
              this.$_getTaskList()
            }
            else{
              return false
            }
          },
          showSearch(){
            this.isShowSearchBar = true
          },
          $_skipToAdd(){
            console.log( '$_skipToAdd' )
            this.$router.push('/task/detail')
          },
          $_showSearch(){
            this.isShowSearchBar = true
          },
          $skipToDetail( index ){
            const cDetail =  this.progressData[index]
            this.$router.push(`/task/Detail?taskId=${cDetail.taskId}`)
          },
          // 侧边栏菜单选择
          $_slide_handleItemClick(type){
            // this.$router.push('/task/category?taskType=' + type )
            // return
            this.popupVisible = false
            // reset y position
            document.body.scrollTop = 0
            this.taskType = type
            this.page = {    // reset pages
              pageSize: 10,
              pageNum : 1
            }
            this.progressData = [] // clear

            this.hasMore = true
            this.$_getTaskList(type) // get task list from conditions
          },
          async $_getTaskList (taskType){
            if( !this.hasMore ){
              return
            }
            this.hasMore = false
            let params = {
              ...this.page
            }

            params.taskType = taskType || this.taskType

            let res = await this.$get('/api/task/list', params).catch(err=>{ Toast(err.msg) })

            if( res.data.length ) {
              // pages data deal with array.concat
              this.progressData = this.progressData.concat(this.mapTask(res.data))
              console.log(res)
              this.page.lastValue = res.lastValue
              this.page.pageNum += 1
              setTimeout(()=>{
                this.hasMore = res.hasMore
              }, 800)

            }
            else{
              this.hasMore = false
            }
          },
          mapTask(data) {
            return data.map((task)=>{
              task.themeTitle = task.title
              task.grade = Number(task.grade)
              task.taskId = task._id
              // 时间转格式
              task.date = dateFormat12ruleLong( new Date( task.arrivalTime  ))
              delete task._id
              return task
            })
          },
          resultSelect(item){
            this.$router.push(`/task/detail?taskId=${item._id}`)
          },
        }
    }
</script>

<style module lang='scss'>
  .header_fix{
    position: fixed;
    z-index: 1;
  }
  .header{
    z-index: 3;
  }
  .searchBar{
    position: absolute;
    top: 92px ;
    z-index : 3 ;
  }
  .transparent{
    background-color: transparent;
  }
  .coverImg_container{
    position: fixed;
    top: 0 ;
    left: 0 ;
    width: 100vw;
    z-index: 1;
    >img{
      width: 100%;
      height: 450px;
    }
    .textContent{
      position: absolute;
      bottom: 90px;
      right: 35px ;
      p{
        margin-right: 8px;
        margin-bottom: 10px;
      }
    }
    .whiteMask{
      /*width: 100%;*/
      position: absolute;
      bottom: 0 ;
      left: 0;
      /*background-color: transparent;*/
      z-index: 4 ;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 100px 0px 0px 100vw;
      border-color: transparent transparent white white;
      width: 0px;
      height: 0px;
    }
    .plusBtn{
      position: absolute;
      bottom: 20px ;
      left: 70px ;
      z-index: 5 ;
    }
  }
  .progress_container{
    padding-top: 450px ;
    position: relative;
    z-index: 0;
  }
</style>
